<template>
    <div class="user">
        <div class="list">

        <!-- 重复的代码块 -->
        <!-- <div class="list__item">
            <div class="list__left">
            <div class="list__label">姓名：</div>
            <div class="list__content">王大冶</div>
            </div>
            <div class="list__right">
            <i class="list__icon">删除</i>
            </div>
        </div>
        <div class="list__item">
            <div class="list__left">
            <div class="list__label">年龄：</div>
            <div class="list__content">40</div>
            </div>
            <div class="list__right">
            <i class="list__icon">添加</i>
            </div>
        </div> -->

        <!-- 使用自定义的组件更简洁 -->
        <SmallComponent label="姓名：" content="大冶" />
        <SmallComponent label="年龄：" content="40" />
        </div>
    </div>
</template>

<script>
// 解决temmplate中的重复代码块
const SmallComponent = {
  props: ['label', 'content'],
  template: `
      <div class="list__item">
        <div class="list__left">
          <div class="list__label">{{label}}：</div>
          <div class="list__content">{{ content }}</div>
        </div>
        <div class="list__right">
          <i class="list__icon">添加</i>
        </div>
      </div>
  `,
}

// main.js里的 createApp 需要跟下面这样导入
// import { createApp } from 'vue/dist/vue.esm-bundler.js'

export default {
  components: {
    SmallComponent,
  },
}
</script>